<template>
  <div class="page">
    <ArcgisMap ref="map_ref"></ArcgisMap>
    <div class="function">
      <div class="t">
        <h2><i class="el-icon-menu"></i> 工具栏</h2>
      </div>
      <el-menu
        default-active="1"
        class="el-menu-demo"
        background-color="Transparent"
        active-text-color="#16D229"
        text-color="#fff"
        mode="horizontal"
        @select="select"
      >
        <el-menu-item index="1">NPP信息</el-menu-item>
        <el-menu-item index="2">变化分析</el-menu-item>
      </el-menu>
      <div v-show="index === '1'" class="f1">
        <div class="area">
          <h3>
            了解研究区:<el-button
              class="el-icon-s-promotion"
              type="text"
              @click="centerDialogVisible = true"
            ></el-button>
          </h3>

          <div class="addarea">
            <el-button
              id="areabtn"
              type="success"
              size="small"
              class="el-icon-map-location"
              plain
              @click="addGanjiang"
              ><span>加载研究区范围</span></el-button
            >
          </div>
        </div>
        <div class="year">
          <div class="Ftitle">
            <h3>年际NPP信息查询 <i class="el-icon-search"></i></h3>
          </div>
          <div class="search">
            <el-select
              class="select"
              v-model="value"
              @change="valueChange"
              clearable
              size="medium"
              placeholder="请选择查看年份"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="vegtation">
          <div class="Ftitle">
            <h3>植被碳汇信息 <i class="el-icon-search"></i></h3>
          </div>
          <div class="lucc">
            <el-button
              id="luccbtn"
              type="success"
              size="small"
              class="el-icon-map-location"
              plain
              @click="loadVegTypeLayer"
              ><span>加载植被分布</span></el-button
            >
          </div>
        </div>
        <div class="swipe">
          <div class="swipeTitle"><h3>对比分析</h3></div>
          <div class="leftandright">
            <el-select
              class="left"
              v-model="leftValue"
              size="medium"
              placeholder="左图层"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :value="item.value"
              >
              </el-option>
            </el-select>
            <el-select
              class="right"
              v-model="rightValue"
              size="medium"
              placeholder="右图层"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
          <el-button
              id="swipebtn"
              type="success"
              size="small"
              class="el-icon-map-location"
              plain
              @click="compareLayers"
              ><span>对比分析</span></el-button
            >
            <el-button
              id="closeswipe"
              type="danger"
              round
              @click="closeswipe"
              ><i class="el-icon-circle-close"></i></el-button
            >
        </div>
      </div>
      <div v-show="index === '2'" class="f2">
        <div class="tab1">
          <div class="doubt" @click="keymethods">《关键技术》<i class="el-icon-key"></i></div>
          <el-menu
            class="el-menu-vertical-demo"
            background-color="Transparent"
            :activeIndex="activeIndex"
            active-text-color="#16D229"
            text-color="#fff"
            @select="hurstAndSen"
          >
            <el-menu-item index="1">
              <i class="el-icon-menu"></i>基于Theil-Sen趋势分析
            </el-menu-item>
            <el-menu-item index="2">
              <i class="el-icon-document"></i>NPP预测未来变化
            </el-menu-item>
          </el-menu>
        </div>
      </div>
    </div>
    <el-dialog
      class="gjinfo"
      title="赣江流域"
      :modal-append-to-body="false"
      :append-to-body="true"
      :visible.sync="centerDialogVisible"
      width="50%"
      center
    >
      <p>赣江是江西省最大的河流,长江八大支流之
      一。赣江流域地处江西省中南部,长江中下游右
      岸,面积约8.2809×104km2,流域自北向南呈阶
      梯状分布,横跨4个纬度。上游以山地丘陵地貌为
      主,森林覆盖率高于70%,且矿产资源丰富,稀
      土、钨矿年产量在全国占重要比重;中游以吉泰 红岩丘陵盆地为主,是
      江西省著名的产粮基地, 农业开发力度较大;下游多为丘陵、平原,其中
      丰城、樟树、高安等地亦是江西省粮食主产区。流域属亚热带湿润季风气候
      区, 年平均气温约 18.3℃,南高北低;年均降水量在1400~1800mm,
      时空分布不均匀,上半年易涝,下半年易旱,降 水东多西少,山区多于平原。</p>
    </el-dialog>
    <el-dialog
      class="keyinfo"
      title="研究方法"
      :modal-append-to-body="false"
      :append-to-body="true"
      :visible.sync="keyDialogVisible"
      width="50%"
      center
    >
    <p>
      Sen趋势分析和M-K检验：Theil-Sen方法，是一种非参数化的稳健的估计趋势的计算方法，
      不受测量误差及利群数据的影响，能够长时间序列进行趋势计算：
    </p>
    <img style="height:100px;margin-left:100px" src="../assets/sen.png">
    <p>Hurst指数：基于重标极差（R/S）分析方法的Hurst指数是定量描述时间序列数据持续性特征的有效方法，
      采用Hurst指数分析GPP时间序列的未来可持续性。Hurst指数（H）介于0～1之间：H=0.5，表示趋势是随机的，
      未来和过去变化趋势无关；当0＜H＜0.5，表明GPP变化趋势可能反转，未来与过去趋势呈相反关系，值越接近于0，
      反持续性越强；当0.5＜H＜1，则预示变化趋势可能持续，H值越接近1，持续性越强。</p>
    </el-dialog>
    <!-- npp图表 -->
    <div v-show="value && index == '1'" class="panel1">
      <YearChart :value="value" ref="year_ref"></YearChart>
      <div class="panel-footer"></div>
    </div>
    <!-- 植被 -->
    <div v-show="vegchartVisable && index == '1'" class="panel1">
      <Veg ref="veg_ref"></Veg>
      <div class="panel-footer"></div>
    </div>
    <!-- 图表展示区 -->
    <div v-if="chartvisable && index === '2'" class="panel">
      <h2>{{ changechartTitle }}</h2>
      <SenChart v-if="bindex == '1'"></SenChart>
      <HurstChart v-if="bindex == '2'"></HurstChart>
      <div class="panel-footer"></div>
    </div>
  </div>
</template>

<script>
import ArcgisMap from "@/components/arcgisMap.vue";
import YearChart from "@/components/YearChart.vue";
import Veg from "@/components/Vegetation.vue";
import HurstChart from "@/components/HurstChart.vue";
import SenChart from "@/components/SenChart.vue";
export default {
  name: "MainPage",
  components: {
    ArcgisMap,
    YearChart,
    Veg,
    HurstChart,
    SenChart,
  },
  data() {
    return {
      activeIndex: "/mainpage", //活动视图
      //年份
      options: [
        {
          value: 2000,
        },
        {
          value: 2001,
        },
        {
          value: 2002,
        },
        {
          value: 2003,
        },
        {
          value: 2004,
        },
        {
          value: 2005,
        },
        {
          value: 2006,
        },
        {
          value: 2007,
        },
        {
          value: 2008,
        },
        {
          value: 2009,
        },
        {
          value: 2010,
        },
        {
          value: 2011,
        },
        {
          value: 2012,
        },
        {
          value: 2013,
        },
        {
          value: 2014,
        },
        {
          value: 2015,
        },
        {
          value: 2016,
        },
        {
          value: 2017,
        },
        {
          value: 2018,
        },
        {
          value: 2019,
        },
        {
          value: 2020,
        },
      ],
      value: null, //当年选择的年份
      chartInstance: null,
      i: 0,
      infoWindow: null, //信息展示框
      btnvalue: false, //按钮
      index: "1",
      bindex: "", //变化分析
      centerDialogVisible: false,
      keyDialogVisible: false,
      chartvisable: false,
      changechartTitle: "",
      activeIndex: "",
      vegchartVisable:false,
      leftValue:null,
      rightValue:null,
    };
  },
  beforeDestroy() {},
  methods: {
    //选择功能区
    select(index) {
      if (index === "1") {
        this.index = index;
        this.chartvisable = false;
        this.bindex = "";
        this.activeIndex = "";
        this.clearAll()
      } else if (index === "2") {
        this.closeswipe()
        this.index = index;
        this.value = ""
        this.clearAll()
      }
    },
    //选择hurst和Sen
    hurstAndSen(index) {
      // console.log(this.$refs.map_ref.map);
      
      if (this.$refs.map_ref.imageryLayer) {
        this.$refs.map_ref.map.remove(this.$refs.map_ref.imageryLayer);
      }
      this.chartvisable = true;
      if (index === "1") {
        this.changechartTitle = "植被NPP变化趋势与显著性";
        this.bindex = index;
        this.activeIndex = index;
        this.loadSenLayer()
      } else if (index === "2") {
        this.changechartTitle = "NPP预测未来变化";
        this.bindex = index;
        this.activeIndex = index;
        this.loadHurstLayer()
      }
    },
    //加载研究区范围
    addGanjiang() {
      this.$refs.map_ref.addGanJiangVec();
    },
    //选择年份
    valueChange(newValue) {
      this.vegchartVisable = false
      this.$refs.map_ref.addYearLayer(newValue);
      this.$refs.year_ref.barChart(newValue)
      this.$refs.year_ref.pieChart(newValue)
    },
    //加载植被类型图层
    loadVegTypeLayer() {
      this.value = null 
      this.vegchartVisable = true
      this.$refs.map_ref.addLUCCLayer();
    },
    //选择年份
    loadSenLayer() {
      this.$refs.map_ref.addSenLayer();
    },
    //选择年份
    loadHurstLayer() {
      this.$refs.map_ref.addHurstLayer();
    },
    //选择年份
    loadLUCCLayer() {
      this.$refs.map_ref.addLUCCLayer();
    },
    //对比
    compareLayers(){
      if(this.leftValue===this.rightValue){
        this.$message("年份相同，对比失败！")
        return;
      }
      this.$refs.map_ref.addSwipe(this.leftValue,this.rightValue)
    },
    //关闭卷帘门
    closeswipe(){
      this.leftValue = null
      this.rightValue = null
      this.$refs.map_ref.toggleSwipe()
    },
    keymethods(){
      this.keyDialogVisible = true
    },
    //清空图层
    clearAll() {
      this.$refs.map_ref.view.map.layers.removeAll();
    },
  },
};
</script>

<style scoped>
.page {
  font-family: "华文楷体";
  font-weight: normal;
}
.el-menu-item:not(.disabled):hover {
  background-color: rgba(0, 0, 0, 0) !important;
}
h3 {
  color: rgb(223, 229, 223);
}
.t {
  padding-left: 5px;
  color: rgb(8, 99, 177);
}
.el-menu-demo {
  height: 50px;
  margin-bottom: 10px;
}
.el-menu-item {
  font-size: 16px;
  padding: 0;
}
.el-menu--horizontal > .el-menu-item {
  line-height: 50px;
  height: 100%;
}
.el-menu--horizontal {
  display: flex;
  justify-content: space-between !important; /* 左右两侧均匀分布 */
}
.tab1 .el-menu {
  border-right: none;
}
.tab1 .el-menu-vertical-demo .el-menu-item {
  padding: 0 !important;
  font-size: 16px;
  height: 30px;
  line-height: 30px;
  margin-bottom: 5px;
}
.doubt {
  margin-bottom: 5px;
  text-align: center;
  font-size: 16px;
  color: aliceblue;
}
.doubt:hover {
  cursor: pointer;
  color: #16d229;
}
.area {
  padding-left: 10px;
  margin-bottom: 20px;
}
.area h3 {
  font-size: 16px;
  line-height: 30px;
}
.area h3:hover {
  cursor: pointer;
}
.addarea {
  margin-left: 15px;
  margin-top: 5px;
}
.lucc{
  margin-left: 20px;
  margin-top: 7px;
}
.swipe{
  margin-top: 20px;
}
.swipe .swipeTitle h3{
  margin-left: 10px;
  font-size: 16px;
  line-height: 20px;
}
.swipe .leftandright{
  margin-top: 10px;
  margin-bottom: 10px;
  width: 100%;
  display: flex;
}
.swipe .left,
.swipe .right{
  flex: 0.5;
}
.swipe .right{
  margin-left: 20px;
}
.swipe #swipebtn{
  margin-left: 30px;
}
.swipe #closeswipe{
  position: absolute;
  padding: 0;
  margin-left: 5px;
}
.swipe #closeswipe i{
  
  font-size: 30px;
}
.addarea span,
.lucc span,
.swipe span {
  font-family: "华文楷体";
  font-size: 16px;
}
.function {
  padding: 5px;
  width: 16%;
  height: 90%;
  background-color: rgba(1, 1, 2, 0.5);
  position: absolute;
  top: 0%;
  left: 0px;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);
}
.year {
  padding-left: 10px;
  width: 100%;
  margin-bottom: 20px;
}

.Ftitle {
  font-size: 14px;
  line-height: 30px;
  margin-bottom: 5px;
}
.search {
  margin: 0 auto;
  width: 80%;
}
.select {
  width: 100%;
}
.vegtation {
  padding-left: 10px;
  width: 100%;
  margin-bottom: 10px;
}
.panel1 {
  position: absolute;
  bottom: 5px;
  right: 5px;
  height: 80%;
  width: 21%;
  border: 1px solid rgba(25, 186, 139, 0.17);
  background: rgba(0, 0, 0, 0.2);
  padding: 0 0.1875rem 0;
  margin-bottom: 0.1875rem;
}
.panel {
  position: absolute;
  bottom: 5px;
  right: 5px;
  height: 50%;
  width: 28%;
  border: 1px solid rgba(25, 186, 139, 0.17);
  background: rgba(0, 0, 0, 0.2);
  padding: 0 0.1875rem 0;
  margin-bottom: 0.1875rem;
}
.panel::before {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  width: 10px;
  height: 10px;
  border-top: 2px solid #02a6b5;
  border-left: 2px solid #02a6b5;
}
.panel::after {
  position: absolute;
  top: 0;
  right: 0;
  content: "";
  width: 10px;
  height: 10px;
  border-top: 2px solid #02a6b5;
  border-right: 2px solid #02a6b5;
}
.panel-footer {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
}
.panel-footer::before {
  position: absolute;
  bottom: 0;
  left: 0;
  content: "";
  width: 10px;
  height: 10px;
  border-bottom: 2px solid #02a6b5;
  border-left: 2px solid #02a6b5;
}
.panel-footer::after {
  position: absolute;
  bottom: 0;
  right: 0;
  content: "";
  width: 10px;
  height: 10px;
  border-bottom: 2px solid #02a6b5;
  border-right: 2px solid #02a6b5;
}
h2 {
  height: 30px;
  line-height: 30px;
  text-align: center;
  color: #fff;
  font-size: 18px;
  font-weight: 600;
}
.gjinfo p,
.keyinfo p{
  font-size: 20px;
  line-height: 30px;
  font-family: "华文楷体";
}
</style>